<template>
	<view class="all">
		<h2 style="color: black;">成为创作者</h2>
		<text>昵称</text>
		 
		<u--input ref="nicknameInput" border="bottom" v-model="userInfo.nickname" class="nickname-input"></u--input>
		<view style="margin-top: 20rpx;">
			<u-upload width="10" height="90" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1">
				<view style="display: flex;align-items: center">
					<image class="avatar" v-if="userInfo.headimg" :src="userInfo.headimg" mode="aspectFill"></image>
					<text id="avatar-text">你的头像,至少160*160px</text>
				</view>
			</u-upload>
		</view>
		<text>正在创作</text>
		<u--input ref="creativityInput" lass="creativity" v-model="creativity" border="bottom"
			placeholder="一件什么样的的事情呐"></u--input>
		<text>创作分类</text>
		<u-picker :show="isCategoryPickerShow" :columns='[columns.map(item => item.name)]' @confirm="confirmCategory"
			@cancel="cancelCategory" confirm-text="确认" cancel-text="取消"></u-picker>
		<view style="border-bottom: 1px #ccc solid;"><text style="color: #ccc;font-size: 28rpx;"
				@click="isCategoryPickerShow = true">{{categoryName}}</text></view>
		<text>创作规模</text>
		<u-picker :closeOnClickOverlay='true' @close="show = false" :show="isScalePickerShow"
			:columns='[scales.map(item => item.name)]' @confirm="confirmScale" @cancel="cancelScale" confirm-text="确认"
			cancel-text="取消"></u-picker>
		<view style="border-bottom: 1px #ccc solid;">
			<text style="color: #ccc;font-size: 28rpx;" @click="isScalePickerShow = true">{{scaleName}}</text>
		</view>
		<text>创作介绍</text>
		<view>
			<!-- <textarea placeholder-style="padding:10rpx;"  maxlength="200" placeholder="创作介绍" style="border:  1px #ccc solid;width: 100%;height: 180rpx;"></textarea> -->
			<u--textarea v-model="value" placeholder="请输入内容" count maxlength='200'></u--textarea>
		</view>
		<text>封面图</text>
		<view class="coversImg">
			<u-upload height="360rpx" @afterRead="afterReadsss" @delete="deletePicss"
				multiple :maxCount="1">
				<view style="width: 700rpx;height: 300rpx;background-color: #dfdfdf;margin: auto;">
					<image class="covers" v-if="fileList1" :src="fileList1" mode="aspectFit"></image>
				</view>
			</u-upload>
		</view>
		<button style="background-color: #ff724e;color: white;width: 100%;margin-top: 30rpx;" v-if="!userInfo.is_creator"
			@click="submit()">提交</button>
		<button style="background-color: #ff724e;color: white;width: 100%;margin-top: 30rpx;" v-else
			@click="subModify()">修改</button>
	</view>
</template>

<script>
	import {
		uploadFile,
		uploadMp3File
	} from '@/store/upload.js'
	
	import {
		mapState,
		mapActions
	} from "vuex"
	
	export default {
		data() {
			return {
				showImg:true,
				show: false,
				nickNames: '',
				creativity: '',
				value: '',
				isCategoryPickerShow: false, // 控制分类选择器是否显示
				isScalePickerShow: false, // 控制规模选择器是否显示
				avatarUrl: '../../../static/kbblnt.jpg', // 初始化头像URL
				fileList1: '', // 封面图URL
				categoryValue: 0, // 默认选择第一个选项
				categoryName: '请选择分类',
				scaleValue: 0, // 用于绑定创作规模选择值
				categoryId: 0, // 初始化分类ID
				scaleId: 0,
				scaleName: '请选择规模',
				columns: [],
				scales: [],
				fileList: [],
			};
		},
		onLoad() {
			//this.getProgrammeList()
			//this.getCateList()
			this.getCategory()
			this.getCreateScale()
			this.getUserInfo()
			
			//this.getCreatApply()
			
			
		},
		computed: {
			...mapState("user", ['userInfo'])
		},
		methods: {
			...mapActions("user", ['getUserInfo']),
			confirmCategory(e) {
				// 处理确认逻辑
				const index = e.indexs[0]
				this.categoryName = e.value[0]
				this.categoryId = this.columns[index].id;
				console.log(this.categoryId,'创造分类')
				this.isCategoryPickerShow = false;
			},
			getDesigned(){
				console.log(this.userInfo,
				'嘻嘻嘻')
				this.creativity = this.userInfo.remark
				this.value = this.userInfo.content
				this.fileList1 = this.userInfo.cover
				const category = this.columns.find(column => column.id === this.userInfo.user_creation_cate_id);
				const categorys = this.scales.find(column => column.id === this.userInfo.status);
				if(category){
					 this.categoryName  = category.name
				}
				if(categorys){
					 this.scaleName  = categorys.name
				}
			},
			subModify(){
			 console.log(this.categoryId,'sssssssssssssssssssssssssssssssssssssssssssssssssssssssss')
              this.editUserInfo({
                 nickname: this.userInfo.nickname,
                 headimg: this.userInfo.headimg,
                 remark: this.creativity,
                 user_creation_cate_id: this.categoryId,
                 scale_id: this.scaleId,
                 content: this.value,
                 cover: this.fileList1,  
			   })	  
			 
			},
			editUserInfo(info) {
				this.$api.editUserInfo(info).then((res) => {
					uni.$u.toast('修改成功！')
					this.getUserInfo()
				})
			},
			cancelCategory() {
				// 处理取消逻辑
				this.isCategoryPickerShow = false;
			},
			confirmScale(e) {
				// 处理确认逻辑
				const index = e.indexs[0]
				this.scaleName = e.value[0]
				this.scaleId = this.scales[index].id;
				console.log(this.scaleId,'未得到创造分类')
				this.isScalePickerShow = false;
			},
			cancelScale() {
				// 处理取消逻辑
				this.isScalePickerShow = false;
			},
			// getUserInfo(){
			// 	this.$api.getUserInfo({}).then(res => {
			// 		this.avatarUrl=res.data.headimg
			// 		console.log(res.data.headimg);
			// 	})
			// },
			getCategory() {
				this.$api.getCategory({}).then(res => {
					this.columns = res.data
					console.log(this.columns,'创造分类')
					this.getDesigned()
				})
			},
			getCreateScale() {
				console.log('0000000')
				this.$api.getCreateScale({}).then(res => {
					this.scales = res.data
					console.log('创造规模')
					this.getDesigned()
					
				})
			},

			submit() {
				this.$api.getCreatApply({
					nickname: this.userInfo.nickname,
					headimg: this.userInfo.headimg,
					remark: this.creativity,
					user_creation_cate_id: this.categoryId,
					scale_id: this.scaleId,
					content: this.value,
					cover: this.fileList1,
				}).then(res => {
					console.log(1);
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					});
					uni.reLaunch({
						url: "/pages/mine/mine"
					});
				}) 
			},
			async afterRead(event) {
				const result = await uploadFile([event.file[0].url])
				this.userInfo.headimg   = result[0]
			},

			// 删除头像图片
			deletePic(event) {
				this.userInfo.headimg = '';
			},

			deletePicss(event) {
				this.fileList1 = '';
			},
			// 新增图片
			async afterReadsss(event) {
				const result = await uploadFile([event.file[0].url])
				console.log(result[0]);
				this.fileList1 = result[0]
				this.showImg=false
				
			},
			// 通用的图片上传方法
			uploadImage(filePath, type) {
				// 检查文件路径是否存在以及文件是否为空
				if (!filePath) {
					uni.showToast({
						title: '文件不能为空',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: 'https://huiyuanzhifu.12d3.cn/api/Upload/img', // 你的图片上传接口
					filePath: filePath,
					name: 'file',
					header: {
						'Content-Type': 'multipart/form-data'
					},
					success: (uploadRes) => {
						console.log('Server response:', uploadRes.data); // 打印服务器返回的数据
						uni.hideLoading();
						if (uploadRes.statusCode === 200) {
							let data = JSON.parse(uploadRes.data);
							if (data.code === 0) { // 假设服务器返回的code为0时表示成功
								if (type === 'avatar') {
									this.avatarUrl = data.url; // 假设返回的数据中有url字段
									console.log('Avatar URL:', this.avatarUrl); // 此时应该能够正确输出
								} else if (type === 'cover') {
									this.fileList1 = [{
										url: data.url
									}]; // 更新封面图数组
									console.log('Image Lists:', JSON.stringify(this
										.fileList1)); // 使用JSON.stringify格式化输出
								}
								uni.showToast({
									title: '上传成功',
									icon: 'success'
								});
							} else {
								uni.showToast({
									title: data.msg || '上传失败',
									icon: 'none'
								});
							}
						} else {
							uni.showToast({
								title: '上传失败，请重试',
								icon: 'none'
							});
						}
					},
					fail: (error) => {
						uni.hideLoading();
						uni.showToast({
							title: '上传失败，请重试',
							icon: 'none'
						});
						console.error('Upload error:', error);
					}
				});
			},
			filterBadWords(inputText) {
				const badWordsList = ["操", "畜生", "逼"]; // 替换为实际的不当词汇列表
				return badWordsList.some(badWord =>
					inputText.toLowerCase().includes(badWord.toLowerCase())
				);
			},
			validateForm() {
				// const nickname = this.$refs.nicknameInput.value; // 假设您已经为昵称输入框设置了ref
				// // 校验昵称
				// if (!this.nickNames || this.nickNames.trim() === '') {
				// 	uni.showToast({
				// 		title: '请输入昵称',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// // // 校验头像
				// // if (!this.avatarUrl) {
				// // 	uni.showToast({
				// // 		title: '请选择头像',
				// // 		icon: 'none'
				// // 	});
				// // 	return false;
				// // }
				// // 校验正在创作的内容
				// if (!this.creativity || this.creativity.trim() === '') {
				// 	uni.showToast({
				// 		title: '请输入正在创作的内容',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// // 校验创作分类
				// if (this.categoryName === '请选择分类') {
				// 	uni.showToast({
				// 		title: '请选择创作分类',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// // 校验创作规模
				// if (this.scaleName === '请选择规模') {
				// 	uni.showToast({
				// 		title: '请选择创作规模',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// if (this.filterBadWords(nickname)) {
				// 	uni.showToast({
				// 		title: '昵称包含不当词汇，请修改。',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// // 检查正在创作的内容
				// const creativity = this.$refs.creativityInput.value; // 假设您已经为创作内容输入框设置了ref
				// if (this.filterBadWords(creativity)) {
				// 	uni.showToast({
				// 		title: '创作内容包含不当词汇，请修改。',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// return true
			},
			// submit() {
			// 	// if (this.validateForm()) {
					
			// 	// }
			// }
		},
	}
</script>
<style>
	.all {
		width: 95%;
		margin: auto;
		line-height: 90rpx;
		font-size: 30rpx;
	}

	.all text {
		color: #f60;
	}

	.step {
		position: relative;
		right: 120rpx;
		top: 30rpx;
	}

	//头像
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		/* 垂直对齐 */
		margin-right: 10rpx;
		cursor: pointer;
		/* 添加指针样式，表示可点击 */
	}

	#avatar-text {
		display: inline-block;
		vertical-align: middle;
		/* 垂直对齐 */
		color: #ccc;
		font-size: 18rpx;
		font-weight: 300;
		margin: 20rpx 0rpx;
	}

	.u-input {
		border-bottom: 1px solid #bbb;
	}

	.presentation {
		width: 700rpx;
		height: 400rpx;
		border: 2px #bbb solid;
	}

	/* 调整 <select> 元素的样式 */
	select {
		display: inline-block;
		/* 使选择器与 input 元素水平对齐 */
		width: 100%;
		/* 使选择器宽度与输入框宽度相同 */
		border-bottom: 1px solid #bbb;
		/* 添加底边框 */
		border-top: 0;
		/* 隐藏上边框 */
		border-left: 0;
		/* 隐藏左边框 */
		border-right: 0;
		/* 隐藏右边框 */
		font-size: 28rpx;
		/* 设置字体大小 */
		color: #bbb;
		/* 设置字体颜色 */
		background-color: #fff;
		/* 设置背景颜色 */
		outline: none;
		/* 移除焦点框 */
	}
	/* 调整选项的样式 */
	option {
		font-size: 28rpx;
		/* 设置字体大小 */
		color: #bbb;
		/* 设置字体颜色 */
	}
	.covers {
		width: 100%;
		height: 300rpx;
	}
	.coversImg .u-icon{
		display: inline-block;
	}
</style>